<template>
  <el-table :data="data" style="width: 100%" border stripe>
    <el-table-column prop="spec_name" label="属性" />
    <el-table-column label="成本">
      <template slot-scope="scope">
        <el-input
          v-model="scope.row.cost"
          type="number"
          size="small"
        />
      </template>
    </el-table-column>
    <el-table-column label="原价">
      <template slot-scope="scope">
        <el-input
          v-model="scope.row.original_price"
          type="number"
          size="small"
        />
      </template>
    </el-table-column>
    <el-table-column label="折扣价">
      <template slot-scope="scope">
        <el-input
          v-model="scope.row.price"
          type="number"
          size="small"
        />
      </template>
    </el-table-column>
    <el-table-column label="会员价">
      <template slot-scope="scope">
        <el-input
          v-model="scope.row.discount_price"
          type="number"
          size="small"
        />
      </template>
    </el-table-column>
    <el-table-column label="积分">
      <template slot-scope="scope">
        <el-input
          v-model="scope.row.points"
          :disabled="scope.row.is_points != 1"
          type="number"
          size="small"
        />
      </template>
    </el-table-column>
    <el-table-column label="库存">
      <template slot-scope="scope">
        <el-input
          v-model="scope.row.inventory"
          :disabled="isEdit"
          type="number"
          size="small"
        />
      </template>
    </el-table-column>
    <el-table-column label="图片" width="80">
      <template slot-scope="scope">
        <label class="img" :for="'goodUpload' + scope.$index">
          <img :src="scope.row.img" alt="" @click.stop="scope.row.img = ''">
        </label>
        <input
          :id="'goodUpload' + scope.$index"
          type="file"
          style="position:absolute; clip:rect(0 0 0 0);"
          accept="*"
          @change="selectImg(scope.$index)"
        >
      </template>
    </el-table-column>
    <el-table-column label="规格状态">
      <template slot-scope="scope">
        <el-button
          v-if="isEdit"
          type="primary"
          @click="rowUpdate(scope.row)"
        >更新</el-button>
        <el-checkbox v-else v-model="scope.row.isSelected" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { fileUpload } from '@/api/file'
import { mapState } from 'vuex'
import {
  editGoodThree,
  getGoodDetailThree,
  editGoodDetailThree
} from '@/api/good-mng'
export default {
  props: ['id', 'step', 'isEdit'],
  data() {
    return {
      data: []
    }
  },
  watch: {},
  computed: {
    ...mapState({
      goodSpec: state => state.goodMng.goodSpec
    })
  },
  created() {},
  methods: {
    rowUpdate(row) {
      editGoodDetailThree({
        id: row.id,
        spec_img: row.img,
        cost: row.cost,
        original_price: row.original_price,
        discount_price: row.discount_price,
        spe_price: row.price,
        points: row.points
      }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '更新成功',
            type: 'success'
          })
        }
      })
    },
    getData() {
      if (this.isEdit) {
        getGoodDetailThree({ id: this.id }).then(res => {
          if (res.code === 200) {
            if (res.data.length) {
              this.data = res.data.map(item => {
                return {
                  id: item.id,
                  spec_name: item.spec_ids,
                  cost: item.cost,
                  original_price: item.original_price,
                  price: item.spe_price,
                  discount_price: item.discount_price,
                  inventory: item.spec_inventory,
                  img: item.spec_img,
                  points: item.is_points == 1 ? item.points : 0,
                  is_points: item.is_points
                }
              })
            }
          }
        })
      } else {
        if (!Array.isArray(this.goodSpec.spec)) return
        this.data = this.goodSpec.spec.map(item => {
          return {
            spec: item[1],
            spec_name: item[0],
            img: this.goodSpec.commodity.img_show,
            discount_price: this.goodSpec.commodity.discount_price,
            cost: this.goodSpec.commodity.cost,
            price: this.goodSpec.commodity.price,
            original_price: this.goodSpec.commodity.original_price,
            inventory: this.goodSpec.commodity.inventory,
            points: this.goodSpec.commodity.points,
            is_points: this.goodSpec.commodity.is_points,
            isSelected: true
          }
        })
      }
    },
    submit() {
      if (this.isEdit) {
        this.$store.dispatch('goodMng/setSpec', {})
        this.$emit('nextStep')
      } else {
        editGoodThree({
          id: this.id,
          spec: this.data
        }).then(res => {
          if (res.code === 200) {
            this.$store.dispatch('goodMng/setSpec', {})
            this.$emit('nextStep')
          }
        })
      }
    },
    selectImg(index) {
      const formData = new FormData()
      formData.append(
        'file',
        document.getElementById('goodUpload' + index).files[0]
      )
      fileUpload(formData).then(res => {
        if (res.code === 200) {
          this.data[index].img = res.data.file
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.img {
  display: block;
  background-color: #dfdfdf;
  width: 50px;
  height: 50px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
